@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply antialiased;
  }
  
  h1 {
    @apply text-4xl font-bold text-gray-900 dark:text-gray-50;
    @apply mt-0 mb-6;
    @apply bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-50 dark:to-gray-300;
  }

  h2 {
    @apply text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4 mt-8;
  }

  h3 {
    @apply text-xl font-medium text-gray-700 dark:text-gray-200 mb-3 mt-6;
  }

  p {
    @apply text-gray-600 dark:text-gray-300 leading-relaxed mb-4;
  }

  a {
    @apply text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 transition-colors duration-200;
  }

  ul {
    @apply space-y-2 mb-4;
  }

  li {
    @apply text-gray-600 dark:text-gray-300;
  }
}

@layer components {
  /* 代码块容器样式 */
  pre {
    @apply mb-4;
  }

  /* 代码块父容器 */
  .code-block-container {
    @apply relative mb-4;
  }

  /* 代码块包装容器 */
  .code-block-wrapper {
    @apply relative mb-4;
  }

  /* VuePress风格的复制按钮 */
  .code-copy-button {
    @apply absolute top-0 right-0 p-1.5;
    @apply text-gray-400 dark:text-gray-500;
    @apply hover:text-gray-700 dark:hover:text-gray-300;
    @apply focus:outline-none;
    @apply transition-opacity duration-200;
    @apply opacity-0;
    @apply z-10;
    @apply rounded-tr rounded-bl;
    @apply bg-gray-200 dark:bg-gray-700 bg-opacity-80 dark:bg-opacity-80;
    @apply text-xs;
  }

  /* 代码块悬停时显示按钮 */
  .code-block-wrapper:hover .code-copy-button {
    @apply opacity-100;
  }

  /* 复制成功状态 */
  .code-copy-button.success {
    @apply text-green-500 dark:text-green-400;
  }

  /* 复制失败状态 */
  .code-copy-button.error {
    @apply text-red-500 dark:text-red-400;
  }

  /* 提示文本 */
  .code-copy-tooltip {
    @apply absolute px-1 py-0.5 text-[8px];
    @apply bg-gray-800 dark:bg-gray-700 text-white rounded;
    @apply opacity-0 invisible;
    @apply transition-all duration-200;
    @apply whitespace-nowrap;
    @apply -top-6 left-1/2 -translate-x-1/2;
  }

  .code-copy-button:hover .code-copy-tooltip {
    @apply opacity-100 visible;
  }

  .doc-container {
    @apply max-w-4xl mx-auto px-4 py-4;
  }
  
  .doc-content {
    @apply prose dark:prose-invert max-w-none mt-0;
  }
  
  .doc-sidebar {
    @apply fixed top-[60px] left-0 bottom-0 z-40 w-64 -translate-x-full bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 pt-4 pb-20 overflow-y-auto transition-transform duration-300;
    @apply lg:translate-x-0 lg:top-[60px] lg:pt-4;
  }
  
  .doc-sidebar.show {
    @apply translate-x-0;
  }
  
  .doc-nav-item {
    @apply flex items-center px-3 py-2 text-gray-600 dark:text-gray-300 rounded-lg transition-all duration-200;
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400;
    @apply group-hover:translate-x-1;
  }
  
  .doc-nav-item.active {
    @apply bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 font-medium;
  }

  /* 头部移动端菜单按钮 */
  .header-mobile-menu {
    @apply flex items-center justify-center w-8 h-8 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400;
    @apply transition-colors duration-200;
  }

  .main-content {
    @apply w-full pt-4;
    @apply lg:pl-64 lg:pt-4;
  }

  .main-content > div {
    @apply mx-auto max-w-4xl px-4 lg:px-8;
  }

  /* 遮罩层 */
  .sidebar-overlay {
    @apply fixed inset-0 z-30 bg-gray-900/50 opacity-0 pointer-events-none transition-opacity duration-300;
    @apply lg:hidden;
  }

  .sidebar-overlay.show {
    @apply opacity-100 pointer-events-auto;
  }

  /* 导航栏样式 */
  .nav-link {
    @apply inline-flex items-center h-8 px-2 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200;
    @apply leading-none;
  }

  /* 特性卡片 */
  .feature-card {
    @apply p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700;
    @apply hover:border-primary-100 dark:hover:border-primary-900 hover:shadow-md;
    @apply transition-all duration-200;
  }

  .feature-icon {
    @apply text-3xl mb-4 text-primary-500 dark:text-primary-400;
  }

  .feature-title {
    @apply text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2;
  }

  .feature-description {
    @apply text-gray-600 dark:text-gray-300 text-sm;
  }

  /* 移动端优化 */
  @screen sm {
    .doc-container {
      @apply px-6;
    }
  }

  @screen lg {
    .doc-container {
      @apply px-8;
    }
  }

  /* 滚动条美化 */
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }

  .scrollbar-track-gray-100::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }

  /* 折叠式导航 */
  .nav-group {
    @apply space-y-1;
  }

  .nav-group-header {
    @apply flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg cursor-pointer;
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400;
    @apply transition-all duration-200;
  }

  .nav-group-header svg {
    @apply w-4 h-4 transform transition-transform duration-200;
  }

  .nav-group-header.expanded svg {
    @apply rotate-180;
  }
  
  .nav-group-header:not(.expanded) svg {
    @apply -rotate-90;
  }

  .nav-group-content {
    @apply mt-1 space-y-1 pl-4 max-h-0 overflow-hidden;
    @apply transition-all duration-300 ease-in-out;
  }

  .nav-group-content.expanded {
    @apply max-h-[500px];
    @apply block;
  }
  
  .nav-group-content:not(.expanded) {
    @apply hidden;
  }

  .nav-group-item {
    @apply flex items-center px-3 py-2 text-sm text-gray-600 dark:text-gray-300 rounded-lg;
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400;
    @apply transition-colors duration-200;
  }

  .nav-group-item.active {
    @apply bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 font-medium;
  }
  
  .nav-group-item.active:hover {
    @apply bg-primary-100 dark:bg-primary-900/40;
  }
  
  /* 首页链接样式 */
  nav > .nav-group-item {
    @apply mx-4 my-2;
  }
  
  /* 暗色模式切换按钮 */
  .theme-toggle {
    @apply relative flex items-center justify-center px-3 py-1.5 rounded-lg text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700;
    @apply bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
    @apply transition-colors duration-200 shadow-sm;
  }
} 